
import { ref, reactive, onMounted, onUnmounted, provide, } from 'vue';
import { getEditQifaPropsForm, saveEditQifaProps, getEditQifaPropsOptions ,getEditQifaPropsAndClearForm,getEditQifaPropsAndClearOptions} from "@/api/modules/goodsArchive/list/information.ts";
import { ResultEnum } from "@/enums/httpEnum";
import editPropsComponent from './index.vue';

interface Ioptions {
    labe: string, value: string | number
}
interface IformDataItem {
    label: string,
    name: string,
    prop_id: string | number,
    value: string | number,
    options?: Ioptions[],
    attr?: object,
    type: string,
    placeholder: string
}

var businessType = 1; //1 qifa销售，2清关
const msg = reactive<Object>({
    title: 'goods_archive.edit_qifa_props_title',
    title_sku: 'goods_archive.edit_qifa_props_title_sku',
    content: '内容',
    tabTileBase: 'goods_archive.edit_base_info',
    tabTileSaleProps: 'goods_archive.sales_attr',
    tabTileCustomsClearanceProps: 'goods_archive.customs_clearance_attr',
    tabTileGoodsBarCode: 'goods_archive.goods_barcode',
    noModifications:"goods_archive.no_modifications",
    save:"merak.save",
    cancel:"merak.cancel"
})

/**
 * 定义一个针对不同节点类型配置的元素对象。
 * 此对象以节点类型为键，以该节点类型的配置对象为值。
 * 配置对象包括元素类型（如el-select或el-input）、元素属性（如class或multiple）、选项数组（options）以及一个异步函数（asyncFn）。
 * asyncFn是一个异步函数，用于根据参数获取options属性选项。
 */
const elementNodeTypeConfig = {
    "1": {
        type: "el-select",
        attr: {
            class: "qf_select",
            clearable:true
        },
        options: [],
        asyncFn: async (params) => {
            const { code, data } = await getEditQifaPropsOptions(params);
            if (code == ResultEnum.SUCCESS) {
                return Promise.resolve(data)
            }
            return Promise.resolve(data)
        }
    },
    2: {
        type: "el-select",
        attr: {
            class: "qf_select",
            multiple: true,
            clearable:true
        },
        options: [],
        asyncFn: async (params) => {
            const { code, data } = await getEditQifaPropsOptions(params);
            if (code == ResultEnum.SUCCESS) {
                return Promise.resolve(data)
            }
            return Promise.resolve(data)
        }
    },
    3: {
        type: "el-input",
        className: "qf_input",
        attr: {
            class: "qf_input",
            clearable:true
        }

    },
    4: {
        type: "el-input",
        className: "qf_textare",
        attr: {
            class: "qf_textare",
            type:"textarea",
            clearable:true
        }

    },
    5: {
        type: "el-input",
        className: "qf_input",
        attr: {
            class: "qf_input",
            clearable:true
        },
        vBind: 'v-number'
    }

}




/**
 * 使用编辑企发属性表单的钩子函数。
 * 
 * @param proxy - 代理对象，用于访问全局属性和方法。
 * @returns 返回一个对象，包含 组件和显示编辑器属性的函数。
 */
const goodsEditQifaProps = (proxy): Object => {
    // 参考编辑表单的可见性状态。
    const editQifaPropsVisible = ref<boolean>(false);
    const editQifaPropsFromConfig = ref<any>();
    const editQifaPropsFromData = ref<any>({});
    const msgType=ref<any>('')
    let queue = [];
  
    let editQifaOptions = {
        saveCallback: (params) => { }
    }

    /**
     * 显示编辑表单的功能。
     *  
     */
    const editQifaPropsShowFn = async (params) => {
        console.log(params);
    
        // 设置编辑表单为可见状态。
        editQifaPropsVisible.value = true;
        //判断是否是编辑货号属性，更换指的文案
        if(params?.query?.is_sku){
            msgType.value='_sku';
            var  { data } = await getEditQifaPropsAndClearForm({...params.query});
            businessType=3;//如果编辑货号属性，则业务类型为3
        }else{
            var  { data } = await getEditQifaPropsForm({...params.query});
        }
       
     
        queue = params.queue;
 
      

        typeof params.callback == "function" ? editQifaOptions.saveCallback = params.callback : null;
        await createFormData(data);
        editQifaPropsFromConfig.value = data;

    }
    const editQifaPropsResetFn = () => {
        Object.keys(editQifaPropsFromData.value).map(key => {
            editQifaPropsFromData.value[key].value = ''
        });
        editQifaPropsVisible.value = false;
    }
    const editQifaPropsSavetFn = () => {
        let formData = {};
        Object.keys(editQifaPropsFromData.value).map(key => {
            formData[key] = editQifaPropsFromData.value[key].value;
        });
        editQifaPropsResetFn();
        editQifaOptions.saveCallback({ queue, props:formData,type:businessType })
    }

    const createFormData = (data): Promise<any> => {
        data.filter((item) => {
            let itemConfig: IformDataItem = {
                label: item.label,
                name: item.property_en,
                prop_id: item.prop_id,
                value: '',
                placeholder: ""
            }
            itemConfig = Object.assign({}, itemConfig, elementNodeTypeConfig[item.prop_type]);
            if (elementNodeTypeConfig[item.prop_type].asyncFn) {
                // asyncFn 参数 business_type 在 编辑货号属性（is_sku） 状态 会使用 item数据中的 business_type，如果不存（企发属性）在使用 上下文 静态变量
                elementNodeTypeConfig[item.prop_type].asyncFn({ id: item.prop_id, type: item?.business_type??businessType }).then((optionsList) => {
                    itemConfig.options = ref<Ioptions[]>(optionsList);
                })
            }
            editQifaPropsFromData.value[item.property_en] = itemConfig;
            return false
        })

        return Promise.resolve()
    }


    // 本地化消息文本。
    const lang = () => {
        Object.keys(msg).map(key => {
            // 将消息文本的关键字替换为相应的本地化版本。
            msg[key] = proxy.$t(msg[key])
        })
    }
    lang(); // 初始化时执行本地化。

    // 提供依赖 
    provide('editQifaPropsVisible', editQifaPropsVisible);
    provide('editQifaPropsMsg', msg);
    provide('editQifaPropsMsgType', msgType);
    provide('editElementNodeType', elementNodeTypeConfig);
    provide('editQifaPropsFromConfig', editQifaPropsFromConfig);
    provide('editQifaPropsFromData', editQifaPropsFromData);
    provide('editQifaPropsResetFn', editQifaPropsResetFn);
    provide('editQifaPropsSavetFn', editQifaPropsSavetFn);

    // 返回编辑器组件和控制显示的函数。
    return {
        editPropsComponent,
        editQifaPropsShowFn,
        editQifaPropsSavetFn,
        editQifaOptions
    }
}

export default goodsEditQifaProps



